<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
        .layui-table-tool-self{
            display: none;
        }
        .pane_body{
            padding: 5px;
            position: relative;
            box-sizing: border-box;
        }
        .pane_info{
            padding: 10px;
        }
        .layui-tree .active{
            background-color: #eee;
        }
        .disabled_pane{
            width: 98%;
            height: 100%;
            position: absolute;
            z-index: 9999;
            opacity: 0;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <blockquote class="layui-elem-quote">
            系统菜单管理<br>
<!--            <a href="https://gitee.com/whvse/treetable-lay" target="_blank" class="layui-btn layui-btn-danger">treetable-lay</a>-->
        </blockquote>
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs " lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--头部操作-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addMenu">添加菜单</button>
    </div>
</script>

<!-- 添加面板 -->
<script type="text/html" id="addtemplateId">
    <div class="pane_body">
        {{#  if(!d.edit){ }}
            <div class="disabled_pane"></div>
        {{#  } }}
        <form class="layui-form layui-form-pane" action="" lay-filter="demo-lay-filter-add-menu">
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" value="{{d.title}}" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单地址</label>
                <div class="layui-input-block">
                    <input type="text" name="href" required   lay-verify="required" value="{{d.href}}" autocomplete="off" placeholder="请输入菜单地址" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-block">
                    <input type="text" name="icon"   id="iconPicker" value="{{d.icon}}" lay-filter="iconPicker" class="hide">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">父级菜单</label>
                <div class="layui-input-block">
                    {{#  if(d.id){ }}
                        <input type="hidden"  name="id" value="{{d.id}}" >
                    {{#  } }}
                    <input type="hidden"  name="parentId" value="{{d.parentId}}" >
                    <input type="text" name="parentName"  id="parentName_id_"  value="{{d.parentName}}" autocomplete="off" placeholder="请选择父级菜单" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">打开方式</label>
                <div class="layui-input-block">
                    <input type="radio"  name="target" value="_self" title="当前窗口" {{ d.target=='_self' ? 'checked' : '' }}  >
                    <input type="radio"  name="target" value="_blank" title="新窗口" {{ d.target=='_blank' ? 'checked' : '' }}>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限标识</label>
                <div class="layui-input-block">
                    <input type="text"  name="permission"  value="{{d.permission}}" autocomplete="off" placeholder="请输入权限标识" class="layui-input">
                </div>
            </div>
        </form>
    </div>
</script>

<!--父菜单选择模块-->
<script type="text/html" id="parentMenuSelect">
    <div class="pane_info">
        <div id="test_menu_select_id" class="demo-tree-more"></div>
    </div>
</script>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../js/jquery-3.7.1.min.js"></script>
<script src="../js/crypto-js.min.js"></script>
<script src="../js/common.js"></script>
<script src="/lay/t-secrypt-script.js"></script>
<script>
    layui.use(['table', 'treetable','laytpl','iconPickerFa','form','tree'], function () {
        var $ = layui.jquery;
        var tree = layui.tree;
        var table = layui.table;
        var treetable = layui.treetable;
        var iconPickerFa = layui.iconPickerFa;
        var form = layui.form;
        var laytpl = layui.laytpl; //模版

        var isLoading=false;
        var treeData={};

        getTreeData();

        // 渲染表格
        layer.load(2);
        loadTreeTable();
        function loadTreeTable(){
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
                treeIdName: 'id',
                treePidName: 'parentId',
                elem: '#munu-table',
                url: '/menu/all',
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'title', minWidth: 200, title: '菜单名称'},
                    {field: 'href', title: '菜单url'},
                    {
                        field: 'target', width: 100, align: 'center', templet: function (d) {
                            if (d.target == '_self') {
                                return '<span class="layui-badge layui-bg-gray">当前窗口</span>';
                            }
                            if(d.target == '_blank'){
                                return '<span class="layui-badge layui-bg-gray">新窗口</span>';
                            }
                        }, title: '类型'
                    },
                    {field: 'permission', title: '权限标识'},
                    {field: 'orderNumber', width: 80, align: 'center', title: '排序号'},
                    {
                        field: 'isMenu', width: 80, align: 'center', templet: function (d) {
                            if (d.isMenu == 1) {
                                return '<span class="layui-badge layui-bg-gray">按钮</span>';
                            }
                            if (d.parentId == 0) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';
                            } else {
                                return '<span class="layui-badge-rim">菜单</span>';
                            }
                        }, title: '类型'
                    },
                    {templet: '#auth-state',fixed: 'right', width: 120, align: 'center', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });

            //监听工具条
            table.on('tool(munu-table)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === 'del') {
                    delMenu(data);
                } else if (layEvent === 'edit') {
                    updateMenu(data);
                }
            });

            //头工具栏事件
            table.on('toolbar(munu-table)', function(obj){
                switch(obj.event) {
                    case 'addMenu':
                        addMenu();
                        break;
                }
            });
        }


        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });

        //修改菜单
        function updateMenu(data){
            data.edit=true;
            templateRender('addtemplateId',data,function (html){
                layerPage('修改菜单',html,data,'50%','70%',function (index){
                    let json = form.val('demo-lay-filter-add-menu');
                    layutils.ajaxJsonPost('/menu/addmenu',JSON.stringify(json),function (res){
                        if(res.code==200){
                            layer.msg(res.message, {icon: 1},function (){
                                layer.close(index);
                            });
                            getTreeData();
                            //重新获取树的数据
                            loadTreeTable();
                        }else {
                            layer.msg(res.message, {icon: 2});
                        }
                    })
                });
                form.render();
                //渲染图标选择器
                iconPickerRender();
                //渲染父级菜单选择器
                $("#parentName_id_").click(function (e){
                    operateParentMenu({});
                });
            })
        }


        //添加菜单
        function addMenu(){
            let data={
                'edit':true,
                'name':"",
                'title':'',
                'href':'',
                'parentId':0,
                'icon':'fa-arrows',
                'parentName':'顶级菜单',
                'target':'_self',
                'permission':''
            };
            templateRender('addtemplateId',data,function (html){
                layerPage('添加菜单',html,data,'50%','70%',function (index){
                    let json = form.val('demo-lay-filter-add-menu');
                    layutils.ajaxJsonPost('/menu/addmenu',JSON.stringify(json),function (res){
                        if(res.code==200){
                            layer.msg(res.message, {icon: 1},function (){
                                layer.close(index);
                            });
                            //重新获取树的数据
                            getTreeData();
                            loadTreeTable();
                        }else {
                            layer.msg(res.message, {icon: 2});
                        }
                    })
                });
                form.render();
                //渲染图标选择器
                iconPickerRender();
                $('#LAY_layedit_code_1').click(function (e){
                    form.val('demo-lay-filter-add-menu', {
                        "parentId": 9
                        ,"parentName": "测试菜单"
                    });
                });
                //渲染父级菜单选择器
                $("#parentName_id_").click(function (e){
                    operateParentMenu({});
                });
                $('#LAY_layedit_code_2').click(function (e){
                    console.log("点击了")
                    var data = form.val('demo-lay-filter-add-menu');
                    layer.msg(JSON.stringify(data));
                });
            })
        }

        //删除菜单数据
        function delMenu(data){
            layer.confirm(`确定删除菜单：【${data.title}】`, {icon: 3, title:'提示'}, function(index){
                let reqData={'id':data.id+''}
                layutils.ajaxJsonPost('/menu/del',JSON.stringify(reqData),function (res){
                    if(res.code==200){
                        layer.msg(res.message, {icon: 1},function (){
                            layer.close(index);
                        });
                        getTreeData();
                        loadTreeTable();
                    }else {
                        layer.msg(res.message, {icon: 2});
                    }
                })

            });
        }

        //获取tree数据
        function getTreeData(){
            isLoading=false;
            var loading = layer.load('Loading...', {
                shade: [0.1, '#fff'] // 设置遮罩层的透明度和颜色
            });
            layutils.ajaxGet('/menu/gettreelist',{},function (res){
                if(res && res.code===200){
                    treeData=res.data;
                    isLoading=true;
                    layer.close(loading);
                }
            })
        }

        //操作父菜单
        function operateParentMenu(data){
            templateRender('parentMenuSelect',data,function (html){
                layerPage('选择父菜单',html,data,'50%','50%',function (index){
                    layer.close(index);
                });
                //渲染父级菜单
                parentMenuRender();
            })
        }
        //模板渲染
        function templateRender(templateId,data,callback){
            var getTpl = $('#'+templateId).html();
            laytpl(getTpl).render(data, function(html){
                callback(html);
            });
        }
        //操作弹窗
        function layerPage(title,html,data,width,height,callback){
            let index=layer.open({
                type: 1
                ,title: title
                ,area: [width, height]
                ,content: html
                ,btn: ['确认', '取消']
                ,yes: function(){
                    callback(index);
                }
                ,btn2: function(){
                    layer.close(index);
                }
            });
        }
        //父级菜单树渲染
        function parentMenuRender(){
            //无连接线风格
            tree.render({
                elem: '#test_menu_select_id'
                ,data: treeData
                ,showLine: false  //是否开启连接线
            });
            setTimeout(function() {
                // 这里的代码将在 1 秒后执行
                var nodes = $('#test_menu_select_id .layui-tree-entry');
                // 输出选择的节点
                nodes.each(function(index, element) {
                    $(element).on('click', function() {
                        // 移除其他.box元素的.myClass类
                        nodes.removeClass('active');
                        // 为当前点击的元素添加.myClass类
                        $(this).addClass('active');
                        form.val('demo-lay-filter-add-menu', {
                            "parentId": $(this).parent().data('id')
                            ,"parentName": $(this).text()
                        });
                    });
                });
            },200)
        }
        //图标渲染
        function iconPickerRender(){
            iconPickerFa.render({
                // 选择器，推荐使用input
                elem: '#iconPicker',
                // fa 图标接口
                url: "../lib/font-awesome-4.7.0/less/variables.less",
                // 是否开启搜索：true/false，默认true
                search: true,
                // 是否开启分页：true/false，默认true
                page: true,
                // 每页显示数量，默认12
                limit: 12,
                // 点击回调
                click: function (data) {
                    console.log(data);
                },
                // 渲染成功后的回调
                success: function (d) {
                    console.log(d);
                }
            });
        }

    });
</script>
</body>
</html>